
<script lang="ts">
import { defineComponent, ref, watch } from "vue"
import { getAssetsFile } from "@/utils/pub-use";
import { AppModule } from "@/store/modules/app";
import { UserModule } from "@/store/modules/user";
import { getAnnouncementList } from "@/api";
import EventHotSpots from "@/components/EventHotSpots.vue";

export default defineComponent({
    components: { EventHotSpots },
    setup() {
        const teamList = ref([
            {
                name: "internationalFootball",
                img: getAssetsFile("team1.png"),
            },
            {
                name: "ChineseFootball",
                img: getAssetsFile("team2.png"),
            },
            {
                name: "ChampionsLeague",
                img: getAssetsFile("team3.png"),
            },
            {
                name: "ChineseSuperLeague",
                img: getAssetsFile("team4.png"),
            },
            {
                name: "PremierLeague",
                img: getAssetsFile("team5.png"),
            },
            {
                name: "LaLiga",
                img: getAssetsFile("team6.png"),
            },
            {
                name: "SerieA",
                img: getAssetsFile("team7.png"),
            },
            {
                name: "Ligue1",
                img: getAssetsFile("team8.png"),
            },
            {
                name: "Bundesliga",
                img: getAssetsFile("team9.png"),
            }
        ])
        const teamIndex = ref(2)
        const announcementList = ref([]);
        const loadAnnouncement = (id) => {
            var languageId = 0;
            switch (id) {
                case "en":
                    languageId = 0;
                    break;
                case "zh":
                    languageId = 1;
                    break;
                case "tw":
                    languageId = 2;
                    break;
                case "ko":
                    languageId = 3;
                    break;
                case "ja":
                    languageId = 4;
                    break;
                case "th":
                    languageId = 5;
                    break;
                case "ar":
                    languageId = 6;
                    break;
            }
            getAnnouncementList({ pageNum: 0, pageSize: 10, languageId }).then(
                (res) => {
                    announcementList.value = res.data.data.AnnouncementList;
                }
            );
        };
        watch(
            () => AppModule.language,
            (newLanguage: string) => {
                if (newLanguage && UserModule.userAddr) {
                    loadAnnouncement(newLanguage);
                }
            },
            { immediate: true }
        );
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadAnnouncement(AppModule.language);
                }
            },
            { immediate: true }
        );
        return {
            teamList,
            teamIndex,
            announcementList,
            getAssetsFile
        }
    }
})
</script>
<template>
    <div class="page">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in 1" :key="index"><img src="@/assets/image/banner.png" alt=""
                    srcset=""></van-swipe-item>
        </van-swipe>
        <van-notice-bar :scrollable="false" color="#fff" mode="link">
            <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
                <van-swipe-item v-for="(item, i) in announcementList" :key="i" @click="$refs.announcementRefs.show(item)">{{
                    item.Title }}</van-swipe-item>
            </van-swipe>
            <template #left-icon>
                <div class="left-icon">
                    <img :src="getAssetsFile('image31.png')" alt="" srcset="">
                    {{ $t('layout.announcement') }}
                </div>
            </template>
            <template #right-icon>
                <div class="left-icon" @click="$refs.announcementListRefs.onRefresh()">
                    <van-icon name="wap-nav" />
                </div>
            </template>
        </van-notice-bar>
        <div class="troop">
            <ul>
                <li v-for="(item, index) in teamList" :key="index" :class="{ on: teamIndex == (index + 2) }"
                    @click="teamIndex = (index + 2)">
                    <img :src="item.img" alt="" srcset="">
                    <div class="name">{{ $t(`layout.${item.name}`) }}</div>
                </li>
            </ul>
        </div>
        <div class="eventhot">
            <div class="title">{{ $t('layout.EventHotSpots') }}</div>
            <event-hot-spots :teamIndex="teamIndex" />
        </div>
    </div>
    <announcement ref="announcementRefs" />
    <announcement-list ref="announcementListRefs" />
</template>


<style lang="less" scoped>
.page {
    padding: 0 15px 15px 15px;

    .my-swipe {
        .van-swipe-item {
            color: #fff;
            font-size: 20px;
            text-align: center;

            img {
                height: 111px;
            }
        }
    }

    .van-notice-bar {
        margin-top: 12px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0 10px 0px rgba(78, 144, 255, 0.15);
        border-radius: 8px;

        .right-icon {
            img {
                width: 16px;
                height: auto;
            }
        }

        .notice-swipe {
            height: 40px;
        }

        .van-swipe-item {
            line-height: 40px;
            color: rgba(0, 0, 0, 1);
        }

        .left-icon {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #0ba662;
            line-height: 14px;
            font-weight: bold;
            margin-right: 8px;

            img {
                width: 20px;
                height: 18px;
            }
        }
    }

    .troop {
        padding: 15px 0;
        cursor: grab;
        overflow-x: auto;
        user-select: none;
        border-bottom: 1px solid rgba(237, 239, 242, 1);

        ul {
            display: flex;
            transition-property: transform;

            li {
                margin-right: 23px;
                width: 60px;
                flex-shrink: 0;
                opacity: .8;


                &.on {
                    opacity: 1;
                    color: #0ba662;


                    .name {
                        font-weight: bold;
                    }

                    img {
                        border: 1px solid #0ba662;
                    }
                }

                img {
                    width: 100%;
                    border-radius: 8px;

                }

                .name {
                    margin-top: 12px;
                    text-align: center;
                    font-size: 12px;

                }
            }
        }
    }

    .eventhot {
        padding: 15px 0;

        .title {
            font-size: 16px;
            font-weight: bold;
        }
    }
}
</style>
